<template>
  <div class="message-detail-wrap">
    <div class="message-title">{{infoObj.informationTitle}}</div>
    <div class="message-time">{{infoTime}}</div>
    <div class="message-content">{{infoObj.informationDetails}}</div>

    <div class="shop-notice-content" v-if="infoObj.type == 4">
      <div class="shop-tip-box">
        <span class="notice-title">店员须知</span>
        <div class="shop-tip-con" v-html="msgRule"></div>
      </div>

      <div class="message-btn-box" v-if="inviteStatus == 0">
        <button type="button" class="message-btn refuse-btn" @click="refuseShop">拒绝</button>
        <button type="button" class="message-btn consent-btn" @click="consentShop">同意</button>
      </div>

      <div class="invite-result-box" v-if="inviteStatus != 0">
        <img src="../../images/icon_yes.png" class="pic1" onclick="return false" v-if="inviteStatus == 1"/>
        <img src="../../images/icon_no.png" class="pic1" onclick="return false" v-else-if="inviteStatus == 2"/>
      </div>
    </div>

    <v-warn type="1" title="温馨提示" content="同意成为店员前，需绑定银行卡" cancelText="取消" confirmText="去绑定" :value="showBindMark"
            @cancel="hideBindMsg"
            @confirm="msgBindCard"></v-warn>
  </div>
</template>

<script>
  import warn from "../../components/warn"
  import {inviteIsAcceptShop, queryMsgDetail, selectBindBankCard} from "../../axios/api";
  import {formatDate, setSessionStore} from "../../config/util";

  export default {
    data() {
      return {
        msgId: this.$route.query.msgId,
        showBindMark: false,
        userMark: "",
        infoObj: "",
        infoTime: "",
        bankCertNum: "",
        bankUserName: "",
        bindCardType: "",
        shopUserId: "",
        inviteStatus: ""
      }
    },
    created() {
      let base64 = require('js-base64').Base64;
      this.userMark = base64.decode(sessionStorage.getItem("userMark"));
      this.getMsgDetail()
    },
    methods: {
      getMsgDetail() {
        let params = {
          "sgin": this.userMark,
          "infoId": this.msgId
        };
        queryMsgDetail(params).then((res) => {
          if (res.code == 0) {
            this.infoObj = res.data;
            this.infoTime = formatDate(new Date(res.data.time), 'yyyy-MM-dd');
            if (res.data.type == 4) {
              this.shopUserId = res.data.shopUserId;
              this.inviteStatus = res.data.inviteStatus;//0显示同意和拒绝 1已同意 2已拒绝
              if (res.data.rule) {
                this.msgRule = res.data.rule.replace(/\n/g, "<br/>");
                ;//店员须知
              }
            }
          } else {
            this.$vux.toast.text(res.msg, "middle");
          }
        });
      },
      queryIsBindCard(callBack) {//是否绑卡
        let params = {
          "sgin": this.userMark
        };
        selectBindBankCard(params).then((res) => {
          if (res.code == 0) {
            if (res.data != null) {
              if (res.data.bankNumber == "" || res.data.bankNumber == null || res.data.bankNumber == undefined) {//驻场手动输入姓名和身份证-绑卡
                this.bankCertNum = this.$decruption(res.data.identityNo);
                this.bankUserName = res.data.userName;
                this.showBindMark = true;
                this.bindCardType = 1;
              } else {
                if (callBack) {
                  callBack();
                }
              }
            } else {//绑卡
              this.showBindMark = true;
              this.bindCardType = 2;
            }
          }
        });
      },
      consentShop() {//同意
        this.queryIsBindCard(() => {
          this.$vux.loading.show({
            text: '加载中',
          });
          let params = {
            "sgin": this.userMark,
            "status": 1,
            "shopUserId": this.shopUserId
          };
          inviteIsAcceptShop(params).then((res) => {
            this.$vux.loading.hide();
            if (res.code == 0) {
              if (res.data == 1) {
                this.inviteStatus = 1;
              } else {
                this.$vux.toast.text("同意邀请失败，请重试", "middle");
              }
            } else {
              this.$vux.toast.text(res.msg, "middle");
            }
          });
        });
      },
      refuseShop() {//拒绝
        this.$vux.loading.show({
          text: '加载中',
        });
        let params = {
          "sgin": this.userMark,
          "status": 2,
          "shopUserId": this.shopUserId
        };
        inviteIsAcceptShop(params).then((res) => {
          this.$vux.loading.hide();
          if (res.code == 0) {
            if (res.data == 1) {
              this.inviteStatus = 2;
            } else {
              this.$vux.toast.text("拒绝邀请失败，请重试", "middle");
            }
          } else {
            this.$vux.toast.text(res.msg, "middle");
          }
        });
      },
      msgBindCard() {//绑卡
        this.showBindMark = false;
        if (this.bindCardType == 1) {
          this.$router.push({
            path: "/bankCardBind",
            query: {"proxy_bank_user_name": this.bankUserName, "proxy_bank_user_cert": this.bankCertNum, "showPage": 2}
          });
        } else if (this.bindCardType == 2) {
          this.$router.push({path: "/bankCardBind", query: {"showPage": 1}});
        }
      },
      hideBindMsg() {
        this.showBindMark = false;
      }
    },
    components: {
      "v-warn": warn,
    }
  }
</script>

<style lang="less" scoped>
  @import "../../assest/mixin";

  .message-detail-wrap {
    .wh(100%, 100%);
    .message-title {
      padding-top: 0.48rem;
      padding-bottom: 0.267rem;
      margin-left: 0.32rem;
      .size-color-weight(0.453rem, rgba(51, 51, 51, 1), 500);
    }
    .message-time {
      margin-left: 0.32rem;
      .size-color(0.347rem, rgba(153, 153, 153, 1));
      padding-bottom: 0.48rem;
    }
    .message-content {
      width: 9.333rem;
      margin: 0 auto;
      text-indent: 0.8rem;
      .size-color(0.4rem, rgba(102, 102, 102, 1));
      line-height: 0.48rem;
    }
    .shop-notice-content {
      margin-top: 0.64rem;
      .shop-tip-box {
        .wh(100%, 6.933rem);
        background: rgba(245, 248, 250, 1);
        border-radius: 0.053rem;
        display: flex;
        flex-direction: column;
        .notice-title {
          margin-top: 0.4rem;
          margin-bottom: 0.467rem;
          text-align: center;
          line-height: 0.64rem;
          .wh(2.32rem, 0.64rem);
          background: rgba(60, 175, 255, 1);
          border-bottom-right-radius: 0.32rem;
          border-top-right-radius: 0.32rem;
          .size-color-weight(0.4rem, rgba(255, 255, 255, 1), 500);
        }
        .shop-tip-con {
          .wh(9.187rem, auto);
          margin: 0 auto;
          .size-color(0.4rem, rgba(102, 102, 102, 1));
          line-height: 0.48rem;
          p {
            .size-color(0.4rem, rgba(102, 102, 102, 1));
            line-height: 0.48rem;
            &:nth-child(1) {
              padding-bottom: 0.36rem;
            }
            &:nth-child(2) {
              padding-bottom: 0.36rem;
            }
          }
        }
      }
      .message-btn-box {
        margin-top: 1.2rem;
        text-align: center;
        .message-btn {
          .wh(4.267rem, 1.28rem);
          border-radius: 0.16rem;
          line-height: 1.28rem;
          .size-color(0.453rem, rgba(255, 255, 255, 1));
        }
        .refuse-btn {
          margin-right: 0.507rem;
          background: rgba(255, 83, 83, 1);
        }
        .consent-btn {
          background: rgba(60, 175, 255, 1);
        }

      }
      .invite-result-box {
        display: flex;
        justify-content: center;
        .pic1 {
          .wh(3.2rem, 3.2rem);
        }
      }
    }

  }
</style>

